import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'

export default function Message() {
    const navigate = useNavigate()
    let [msg, setMsg] = useState({id:77, title:'xxxYYYZZZ'})
    return (
        <div>
            <ul>
                <li>
                    <Link to="description/1/params测试">params参数</Link>&nbsp;&nbsp;
                </li>
                <li>
                    <Link to="query?username=atguigu&age=10">query参数</Link>&nbsp;&nbsp;
                </li>
                <li>
                    <Link to="testState" state={msg}>state</Link>&nbsp;&nbsp;
                </li>
                <li>
                    <Link to="testState" state={{id:55, title:'5566'}}>state</Link>&nbsp;&nbsp;
                </li>

                <li><button onClick={()=>{
                    // 编程式导航携带 params参数，直接写在路径中
                    navigate(`description/33/3344`)
                }}>编程式导航传递 params</button></li>
                <li><button onClick={()=>{
                    // 编程式导航携带 query参数，直接写在路径中
                    navigate('query?username=尚硅谷&age=98')

                }}>编程式导航传递 query</button></li>
                <li><button onClick={()=>{
                    // state参数，可以通过navigate第二个配置项，进行配置
                    navigate('testState',{
                        state:{
                            id:123,
                            title:'state编程式导航测试'
                        }
                    })
                }}>编程式导航传递 state</button></li>
                
            </ul>
            <div>
                {/* 三级路由组件展示位置 */}
                <Outlet />
            </div>
        </div>
    )
}
